<template>
  <el-select
    style="width: 100%"
    :multiple="multiple"
    clearable
    filterable
    :placeholder="placeholder"
    v-model="selected"
    @change="select"
  >
    <el-option v-for="item in dataList" :key="item._id" :label="item.name" :value="item._id" />
  </el-select>
</template>

<script setup lang="ts" name="selectFilter">
import { computed, onMounted, ref } from "vue";
import { Product } from "@/api/types/base";
import { useDataStore } from "@/stores/modules/data";

const dataStore = useDataStore();

const dataList = computed(() => dataStore.productList);
const selected = ref<{ [key: string]: any }>({});

interface SelectFilterProps {
  requestApi?: (params: any) => Promise<any>; // 请求表格数据的 api ==> 非必传
  data?: Product[]; // 选择的列表数据
  value?: String;
  placeholder?: String;
  multiple?: Boolean;
}

const props = withDefaults(defineProps<SelectFilterProps>(), {
  placeholder: () => "请选择",
  value: () => "",
  multiple: () => false
});

onMounted(() => {
  selected.value = props.value;
  dataStore.findProductList();
});

const select = () => {
  emit("change", selected.value);
};

// emit
const emit = defineEmits<{
  change: [value: any];
}>();
</script>

<style scoped lang="scss"></style>
